/**
 * create by young (young2f@outlook.com) on 2021/2/6
 */

'use strict';
import React from 'react';

import ComponentBase from "../../Base/ComponentBase";
import {Form} from "antd";
import echarts from 'echarts/lib/echarts';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
require('echarts/lib/chart/pie')


@Form.create()
export default class TPie extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    let myChart = echarts.init(this.echartsBox)
    myChart.setOption(this.setOption())
    myChart.on('finished', () => {
      myChart.resize()
    })
  }

  setOption() {
    const {data, title, color} = this.props;
    const _color = color ? color : ['#1890ff', '#13c2c2', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#eb2f96', '#faad14'];
    return {
      color: _color,
      title: {
        text: title,
        left: "center"
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: '',
          type: 'pie',
          data: data,
          label: {
            normal: {
              formatter: function (data) {
                return data.name + ":" + data.value
              },
            }
          }
        }
      ],
      label: {
        // position: 'outside',
        color: this.getThemeProp('primary-color'),
        // formatter: '{b} \n\n {d}%',
        formatter: function (data) {
          return data.name + ":" + data.value + ' \n\n ' + data.percent.toFixed(1) + '%'
        },
        padding: [10, -30, 0, -30],
      },
      labelLine: {
        length: 10,
        length2: 30,
        lineStyle: {
          width: 1
        }
      },
    }
  }

  render() {
    const {width = 200, height = 200, style = {}} = this.props;
    return (
      <div ref={(c) => {
        this.echartsBox = c
      }} style={{width, height, ...style}}>
      </div>
    )
  }
}
